<template>
  <div>
    <form-common :filed-list="searchTableCommonOne" ref="form"></form-common>
    <div class="flex justify-between align-center padding-bottom-20">
      <div class="font-size-16 font-weight-600">{{ title }}</div>
      <div>
        <el-button type="primary" size="mini">导出</el-button>
        <el-button type="primary" size="mini">查询</el-button>
      </div>
    </div>
    <el-table style="width: 100%" :border="true">
      <el-table-column align="left" label="项目名称" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="公司" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="租赁单元" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="客户" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="品牌" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="合同编号" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" label="收入项目" prop="assetName" width="180"></el-table-column>
      <el-table-column align="left" v-for="(filed, filedIndex) in monthList" :key="`filed${filedIndex}`" width="100" :label="filed.label">
        <template slot-scope="scope">
          <span>{{ scope.row[filed.filedName] | moneyFilterNoUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合计" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.allAmount | moneyFilterNoUnit }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import formCommon from '@g/components/form/formCommon.vue';
  import { searchTableCommonOne } from '../assets/form';

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      pageType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        searchTableCommonOne: searchTableCommonOne,
        monthList: [
          { label: '1月', filedName: 'monthAmount1', isMonth: true, index: 0 },
          { label: '2月', filedName: 'monthAmount2', isMonth: true, index: 1 },
          { label: '3月', filedName: 'monthAmount3', isMonth: true, index: 2 },
          { label: '4月', filedName: 'monthAmount4', isMonth: true, index: 3 },
          { label: '5月', filedName: 'monthAmount5', isMonth: true, index: 4 },
          { label: '6月', filedName: 'monthAmount6', isMonth: true, index: 5 },
          { label: '7月', filedName: 'monthAmount7', isMonth: true, index: 6 },
          { label: '8月', filedName: 'monthAmount8', isMonth: true, index: 7 },
          { label: '9月', filedName: 'monthAmount9', isMonth: true, index: 8 },
          { label: '10月', filedName: 'monthAmount10', isMonth: true, index: 9 },
          { label: '11月', filedName: 'monthAmount11', isMonth: true, index: 10 },
          { label: '12月', filedName: 'monthAmount12', isMonth: true, index: 11 },
        ],
      };
    },

    mounted() {},

    methods: {},

    components: { formCommon },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item__label {
    padding-left: 0;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #535353 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    background: #ededed !important;
  }
  ::v-deep .el-table thead .cell {
    font-size: 14px;
  }
</style>
